RECAD 


Caesar Cipher Mixed Alohabet Cipher 
Shift every letter of the Create a mapping 
alphabet between the letters 


A 


S 
U 
B 
C 

| 
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1. Calculate the letter frequencies in the text 
2. Compare them To the English text letter 
frequencies 
3. Look for any other patterns 
(digraphs, words, etc.} 
4. Perform substitution until things start to make 


sense 
Most frequent letters are: 


EIAOINS i Raiae 


Learning Objectives 


“eLearn what are <div> and <span> elements NN 


e Learn wnat are <textarea> elements 


e Learn how fo create an HTML table using the 


following tags: <table>, <thead>, <tbody>, <tr>, 


_ <th>, <td> | 
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Some more HIML 


1. To complete our future challenges, we'll need 
to learn about a few new HTML elements: 


div & span Textarea Tables 


co 
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div & soan 


<div>: a block <span>: an inline 
container element container element 
res 
Q-.---J 


These are used To group cleMeEnis SO eaeeanneet C 
easily target them with CSS and JavaScript selectors 


ie .w1100 
sentinel 
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div Example 


<div id="button-group" > 
<button>Like</button> ae 
<button>Comment</button> 3 
<button>Subscribe</button> 

<7 Gli > 


Eoaee 


<div id="button-group-2"> 
<img src="hello.png"> 


</div> HELLO) 


soan Example 


<p> 
Buy today for only <span id="highlight">3 BTC!</span> 


</p> 


<textarea> 


Large block of editable text! 


Can get/set the value in JS using: 


textAreaElement.value 


Tables 


Some data is best organized in tables 


E.g. the mapping we'll be using for cracking the 
substitution cipher 


A 0.1 Z 
B 0.13 E 


Z 0.01 Y 


Tables - Headers 


<table> 
<thead> 
<tr> 
<th>First Name</th> 
<th>Last Name</th> 
<7 Er> 


</thead> 
</table> 


Tables - Data 


<table> 
<thead>...</thead> —— aa 
<t body > First Name ast Name 
<tr> Princess Carolyn 


<td>Princess</td> 
<td>Carolyn</td> 


<) ui 
<Ei> <7 ur 
</tbody> 
</table> 


Summary 


unlimited characters =a 


Create Table a 
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Questions? 
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$ 
Sentinel 


Your Turn! 


> Play around, have 
fun, ask questions! 


